<template>
	<div class="purchaa-wrap">
		<van-pull-refresh v-model="isLoading" @refresh="onDownRefresh" style="width: 100%;height: 100%;">
			<van-list 
				v-model="loading"
				:immediate-check="false" 
				:finished="finished" 
				finished-text="已加载全部了哦～"
				@load="onLoadMore"
				v-if="listData.length > 0"
			>
				<div class="purchase">
					<div class="mainList">
						<div class="list clearfix" v-for="(item, index) in listData" :key="index" @click="toDetail(item.id)">
							<ul class="ul">
								<li>
									<div class="top">
										<h3>{{item.productName}}({{item.farmName}})</h3>
										<span class="price">{{item.salesPrice}}<i>{{item.salePriceUnit}}</i></span>
									</div>
									<div class="center">
										<div>
											<span class="qk">{{item.saleType}}</span>
											<span class="ps">{{item.shipmentCategory}}</span>
											<span class="by">{{item.postage}}</span>
										</div>
										<span class="address">{{item.originProvince}}</span>
									</div>
									<div class="bottom">
										<span class="bx">
											<img src="@/assets/img/home_img09.png" alt="" class="bao">
											<img src="@/assets/img/home_img10.png" alt="" class="bao2">
											{{item.insurance}}
										</span>
										<span class="jh">交货期：{{item.deliveryMonth}}个月</span>
									</div>
								</li>
							</ul>
							<div class="purchase-btn clearfix">
								<van-button round class="u-btn-default bind-btn" v-if="item.numSaves !== 0">采购</van-button>
								<van-button round class="u-btn-default bind-btn active" :disabled="isDisabled" v-else>售罄</van-button>
							</div>
						</div>
					</div>
				</div>
			</van-list>
		</van-pull-refresh>
	</div>

</template>

<script>
	import Vue from 'vue';
	import { PullRefresh, List } from 'vant';
	Vue.use(PullRefresh).use(List);

	export default {
		inject: ['reload'],
		data() {
			return {
				isDisabled: true,
				btnTitle: '采购',
				loading: false,
				isLoading: false,
				finished: false,
				pageIndex: 1,
				pageSize: 10,
				listData: []
			}
		},
		created() {
			this.getroadList()
		},
		methods: {
			// 获取资源表单列表
			getroadList() {
				let getData = {
					pgCt: this.pageIndex,
					pgSz: this.pageSize
				}
				let apiUrl = this.pageIndex > 1 ? '/api/product/list?noLoading' : '/api/product/list';
				
				this.$api.get(apiUrl, getData)
				.then((data)=>{
					console.log(data)
					this.listData = this.listData.concat(data.data.records);
					// 数据全部加载完成
					if(this.pageIndex > 1 && data.data.records.length < 10){
						this.finished = true;
					}
					
				})
				.catch(() => {
				    this.error = true;
				 })
			},
			// 下拉刷新
			onDownRefresh() {
				setTimeout(()=>{
					this.reload()
				},500)
			},
			// 上拉加载请求方法
			onLoadMore() {
				// 异步更新数据
				setTimeout(() => {
				    this.pageIndex++;
				    this.getroadList()
				    // 加载状态结束
				    this.loading = false;
				}, 500);
			},
			toDetail(id) {
				// 跳转到 home详情
				this.$router.push({
					path: '/home/detail/' + id
				})
			}
		}
	}
</script>
<style>
	.van-pull-refresh {
		overflow: scroll !important;
	}

	
</style>

<style lang="scss" scoped>
	@import "@/assets/css/homeCom.scss";
	.active{
		background: #D0CFCF !important;
	}
	.ps{
		margin-left: 10px;
	}
	.purchaa-wrap {
		width: 100%;
		height: 100%;
		.purchase {
			background-color: #fff;
			width: 100%;
			height: 100%;
			.list {
				border-bottom: 1px solid #e5e5e5;
			
				.ul {
					width: 75% !important;
					border: none;
					float: left;
					.center {
						justify-content: space-between;
						.address {
							font-size: 12px;
							color: #969C9E;
							float: right;
						}
					}
					
				}
			}
			.purchase-btn {
				width: 25%;
				height: 110px;
				display: flex;
				justify-content: center;
				align-items: center;
			
				.bind-btn {
					width: 68px;
					height: 28px;
					line-height: 28px;
					background: linear-gradient(90deg, #31BC8D 0%, #A6E29B 100%);
					color: #fff;
					font-size: 14px;
					box-shadow: none;
					border-radius: 14px;
				}
			}
		}
	}

	

	

	

	
</style>
